<!-- NOTE: work-in-progress, consider this not yet an "official" release of this widgets, future changes may not be backwards-compatible and change functionality signficantly -->

<!-- TODO move styles to separate file? -->

<style>
    #cancel-button {
        padding: 2px 5px;
        margin: 5px;
        font-size: 0.8em;;
    }

    #enroll-button {
        padding: 2px 5px;
        margin: 5px;
        font-size: 0.8em;;
    }
</style>
<ul>
    <li ng-show="$ctrl.patientPrograms.length != 0" ng-repeat="patientProgram in $ctrl.patientPrograms | orderBy: '-dateEnrolled'">
        <a ng-click="$ctrl.gotoProgramDashboard(patientProgram.program.uuid)">
            {{ patientProgram.program.display }}
        </a>

        <div ng-show="!patientProgram.dateCompleted" class="tag">{{ patientProgram.dateEnrolled | date:$ctrl.dateFormat }} - {{'coreapps.dashboardwidgets.programs.current' | translate }}</div>
        <div ng-show="patientProgram.dateCompleted" class="tag">{{ patientProgram.dateEnrolled | date:$ctrl.dateFormat }} - {{ patientProgram.dateCompleted | date:$ctrl.dateFormat }}</div>
    </li>

    <li ng-show="$ctrl.patientPrograms.length == 0">
        {{'coreapps.none' | translate }}
    </li>

</ul>


<div ng-show="$ctrl.canEnrollInProgram && !$ctrl.showAddProgram && $ctrl.config.enableProgramDashboards && $ctrl.unenrolledPrograms && $ctrl.unenrolledPrograms.length > 0">
    <a class="add-link" ng-click="$ctrl.addProgram()">
        <i class="icon-plus-sign" title="{{'coreapps.dashboardwidgets.programs.addProgram' | translate }}"/>
    </a>
</div>

<div ng-show="$ctrl.showAddProgram">
    <div>
        <select  ng-model="$ctrl.input.program"
                 ng-options="program.uuid as program.display for program in $ctrl.unenrolledPrograms">
            <option value="">{{'coreapps.dashboardwidgets.programs.selectProgram' | translate }}:</option>
        </select>
        <br/>
    </div>
    <div>
        <button id="enroll-button" class="confirm" ng-click="$ctrl.gotoProgramDashboard()">{{'coreapps.enroll' | translate }}</button>
        <button id="cancel-button" class="cancel" ng-click="$ctrl.cancelAddProgram()">{{'coreapps.cancel' | translate }}</button>
    </div>
</div>